<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 个人资料
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-tabs value="基础信息">
      <el-tab-pane label="基础信息" name="基础信息">
        <div class="container">
          <el-row>
            <el-form :model="form" status-icon ref="form" label-width="80px" class="demo-ruleForm">
              <!-- <el-col :span="3">
                <el-upload
                  id="changepsd"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col> -->
              <el-col :span="10">
                <el-form-item label="姓名">
                  <el-input style="width:100%" v-model="form.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="工号">
                  <el-input style="width:100%" :disabled="true" v-model="form._id" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input style="width:100%" v-model="form.account" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="性别">
                  <el-select style="width:100%" v-model="form.gender" clearable placeholder="性别">
                    <el-option label="男" value="shanghai"></el-option>
                    <el-option label="女" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="年龄">
                  <el-input
                    type="text"
                    v-model="form.age"
                    placeholder="年龄"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input type="password" placeholder="新密码" size="medium" suffix-icon="iconfont icon-mima" v-model="form.password"
                        @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align:right">
              <el-button type="primary" @click="back">修改</el-button>
              <!-- <el-button type="info" @click="back">返回</el-button> -->
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="所有账户" name="所有账户" @click="AllAccounts">
        <AllAccounts></AllAccounts>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AllAccounts from "./AllAccounts";
export default {
  components: { AllAccounts },
  name: "messageList",
  data: function() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.psdForm.checkPass !== "") {
          this.$refs.psdForm.validateField("checkPass");
        }
        callback();
      }
    };

    var validateCheckPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.psdForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dlgPsd: false,
      imageUrl: "",
      form: 
        {
        account: "",
        gender: "男",
        _id: "",
        age: "",
        password:'',
        name:''
      },
      
      psdForm: {
        pass: "",
        checkPass: "",
        pass2: "123456"
      },
      rulesPsd: {
        pass: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            validator: validateCheckPass,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    back() {
      //   this.$router.push("/dashboard");
      // console.log(45);
      // console.log(this.form)
      this.$axios.post("/admins/UpdateUser",
      // {
      //   password:this.form.password,
      //   account:this.form.account,
      //   _id:this.form._id,
      //   name:this.form.name,
      //   age:this.form.age,
      // }
      {...this.form})
      .then( data => {
        // console.log(data)
        localStorage.setItem('user',JSON.stringify({...this.form}))
               this.$message({
               type:"success",
               message:'修改成功'
             })
      } )
    },
    AllAccounts() {
      console.log(123);
      this.$router.push("/ChangePsd/AllAccounts");
    },
    getxr() {
      let com=JSON.parse(localStorage.getItem('user'))
      this.form.account = com.account
      this.form._id = com._id
      this.form.name = com.name
      this.form.age = com.age
      this.form.password = com.password
    }
  },
  mounted() {
    this.getxr();
  }
};
</script>

<style>
#changepsd .el-upload--text {
  width: 150px;
  height: 135px;
}

#changepsd .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#changepsd .el-upload:hover {
  border-color: #409eff;
}

#changepsd .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#changepsd .avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
